<template>
  <div id="myChartE" :style="{ width: '100%', height: '300px' }"></div>
</template>
 
<script setup>
import { EcartsE } from "@/api/indexHome";

import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
const erd = elementResizeDetectorMaker();
let myChart;
const initMyChart = () => {
  myChart = echarts.init(document.getElementById("myChartE"));
};

import {
  reactive,
  getCurrentInstance,
  onMounted,
  inject,
  computed,
  toRaw,
} from "vue";

const parentDataE = inject("parentDataE");

/// 声明定义一下echart
let echart = echarts;
watch(
  () => parentDataE.value.staFalsE,
  (newValue) => {
    EcartsAPOT(parentDataE.value);
  },
  { deep: true }
);

onMounted(async () => {
  await nextTick();
  initMyChart();
  // EcartsAPOT(parentDataE.value);
  erd.listenTo(document.getElementById("myChartE"), function () {
    myChart.resize();
  });
});
function EcartsAPOT(obj) {
  let data = {
    state: obj.state,
    wareIds: toRaw(obj.wareIds),
    productId: obj.productId,
    id: obj.shopId,
  };
  if (obj.state == 0) {
    data.createTime = obj.createTime;
  } else {
    data.createTime = obj.monthE;
  }
  EcartsE(data).then((res) => {
    let arrcangkuD = res.data.cangku;
    let warehouseD = [],
      warehousDataD = [],
      warehouseDataD = [];
    if (res.status == 200) {
      let arraywarehD = [];
      if (obj.state == 0) {
        arraywarehD = res.data.wareSaleProduct;
        for (let j = 0; j < arrcangkuD.length; j++) {
          if (arraywarehD.length != 0) {
            for (let i = 0; i < arraywarehD.length; i++) {
              if (arrcangkuD[j].id == arraywarehD[i].warehouseId) {
                warehouseD.push(arraywarehD[i].warehouseName);
                warehousDataD.push(arraywarehD[i].dayNumber);
                warehouseDataD.push(arraywarehD[i].dayChangeNumber);
              } else {
                warehouseD.push(arrcangkuD[j].name);
                warehousDataD.push(0);
                warehouseDataD.push(0);
              }
            }
          } else {
            warehouseD.push(arrcangkuD[j].name);
            warehousDataD.push(0);
            warehouseDataD.push(0);
          }
        }
      } else {
        arraywarehD = res.data.saleWareMonthMoney;
        for (let j = 0; j < arrcangkuD.length; j++) {
          if (arraywarehD.length != 0) {
            for (let i = 0; i < arraywarehD.length; i++) {
              if (arrcangkuD[j].id == arraywarehD[i].warehouseId) {
                warehouseD.push(arraywarehD[i].warehouseName);
                warehousDataD.push(arraywarehD[i].monthNumber);
                warehouseDataD.push(arraywarehD[i].monthChangeNumber);
              } else {
                warehouseD.push(arrcangkuD[j].name);
                warehousDataD.push(0);
                warehouseDataD.push(0);
              }
            }
          } else {
            warehouseD.push(arrcangkuD[j].name);
            warehousDataD.push(0);
            warehouseDataD.push(0);
          }
        }
      }
      initChart(warehouseD, warehousDataD, warehouseDataD);
    }

    // initChart(warehouse, warehousData, warehouseData);
  });
}
onUnmounted(() => {
  erd.uninstall(document.getElementById("myChartE"));
});
const day = new Date().getDate();
// 基础配置一下Echarts
function initChart(warehouseD, warehousDataD, warehouseDataD) {
  // 把配置和数据放这里
  myChart.setOption({
    legend: {
      data: ["销售商品（件）", "兑换商品（件）"],
    },

    xAxis: {
      type: "category",
      data: warehouseD,
      axisTick: {
        alignWithLabel: true,
      },
    },
    tooltip: {
      trigger: "axis",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售商品（件）",
        type: "bar",
        data: warehousDataD,
        smooth: true,
      },
      {
        name: "兑换商品（件）",
        type: "bar",
        data: warehouseDataD,
      },
    ],
  });
}
</script>